<template>
  <Edialog
    :title="editTitle"
    :outershow="codeshow"
    saveClick
    @close="
      codeshow = false;
      $refs.form1.clearValidate();
    "
    @saveFn="saveFn"
  >
    <div style="padding: 0 20px">
      <el-form
        ref="form1"
        :model="form1"
        label-width="100px"
        :rules="codeRules"
      >
        <el-form-item label="代码名称" prop="codeName">
          <el-input
            v-model="form1.codeName"
            placeholder="请输入代码名称（1-40）"
          ></el-input>
        </el-form-item>
        <el-form-item label="代码值">
          <el-input-number
            v-model="form1.codeValue"
            :min="1"
            :max="127"
            label="描述文字"
            @change="form1.codeOrder = $event"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="代码排序">
          <el-input-number
            v-model="form1.codeOrder"
            :min="1"
            :max="127"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="所属代码类型">
          <el-input v-model="form1.req" placeholder="空" disabled></el-input>
        </el-form-item>
      </el-form>
    </div>
  </Edialog>
</template>

<script>
import Edialog from "@/components/Edialog";
import { putSysCode, postSysCode } from "@/api/management/code";
import { fd } from "@/utils/index";
export default {
  components: {
    Edialog,
  },
  data() {
    return {
      editTitle: "",
      codeshow: false,
      form1: {
        codeValue: "",
        codeName: "",
        codeOrder: 1,
        req: "",
      },
      codeRules: {
        codeName: [
          { required: true, message: "请输入代码名称", trigger: "blur" },
          { min: 1, max: 40, message: "长度需要在1-40之间", trigger: "blur" },
        ],
      },
      rowID: "",
      oldId: "",
    };
  },
  watch: {
    "form1.codeOrder"(newval) {
      if (newval == undefined) {
        this.$nextTick(() => {
          this.form1.codeOrder = 1;
        });
      }
    },
    "form1.codeValue"(newval) {
      if (newval == undefined) {
        this.$nextTick(() => {
          this.form1.codeValue = 1;
        });
      }
    },
  },
  methods: {
    async saveFn() {
      this.$refs.form1.validate(async (valid) => {
        if (valid) {
          let res;
          if (this.editTitle == "新增代码") {
            res = await putSysCode(
              fd({
                codeTypeCode: this.rowID,
                ...this.form1,
              })
            );
          } else {
            res = await postSysCode(
              fd({
                codeTypeCode: this.rowID,
                ...this.form1,
                id: this.oldId,
              })
            );
          }
          if (res.code == 0 && res.data.bcode == 0) {
            this.$message.success(res.data.bmsg);
            this.form1 = {
              codeValue: 1,
              codeName: "",
              codeOrder: 1,
              req: "",
            };
            this.codeshow = false;
            this.$parent.pageFun();
          }
        }
      });
    },
    open(val) {
      this.form1.req = val.rowName;
      this.rowID = val.rowID;
      if (!val.ID) {
        this.editTitle = "新增代码";
        this.form1.codeName = "";
        this.form1.codeValue = 1;
        this.form1.codeOrder = 1;
      } else {
        this.editTitle = "修改代码";
        this.form1.codeName = val.CODE_NAME;
        this.form1.codeValue = val.CODE_VALUE;
        this.form1.codeOrder = val.CODE_ORDER;
        this.oldId = val.ID;
      }
      this.codeshow = true;
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 14px;
  width: 100%;
  background-color: #66b1ff;
  color: #fff;
  margin-top: 20px;
}
.caidan {
  width: 100%;
  height: calc(100vh - 354px);
  border: 1px solid #ccc;
  position: relative;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-dropdown {
    position: absolute;
    background-color: #fff;
    right: 0px;
    width: 20px;
  }

  .el-tree-node:focus > .el-tree-node__content .el-dropdown {
    background-color: #f5f7fa;
  }
  .el-tree-node__content:hover .el-dropdown {
    background-color: #f5f7fa;
  }

  .el-dropdown .el-button {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
